import { ref, computed } from 'vue';

/**
 * 线性图表组合式函数
 * @param {Object} config - 图表配置选项
 * @param {string} config.title - 图表标题，默认为 '数据趋势'
 * @param {string} config.seriesName - 系列名称，默认为 '数据'
 * @param {string} config.color - 线条颜色，默认为 '#4080FF'
 * @param {boolean} config.smooth - 是否平滑曲线，默认为 true
 * @param {boolean} config.showArea - 是否显示面积，默认为 true
 * @param {number} config.areaOpacity - 面积透明度，默认为 0.1
 * @param {boolean} config.showLegend - 是否显示图例，默认为 true
 * @param {string} config.legendPosition - 图例位置，默认为 'bottom'
 * @param {Object} config.grid - 网格配置
 * @param {Object} config.tooltip - 提示框配置
 * @param {Object} config.xAxis - X轴配置
 * @param {Object} config.yAxis - Y轴配置
 * @returns {Object} 返回包含图表选项和更新方法的对象
 */
export function useLineChart(config = {}) {
  // 默认配置
  const defaultConfig = {
    title: '数据趋势',
    seriesName: '数据',
    color: '#4080FF',
    smooth: true,
    showArea: true,
    areaOpacity: 0.1,
    showLegend: true,
    legendPosition: 'bottom',
    grid: {
      left: '1%',
      right: '5%',
      bottom: '10%',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
        },
      },
    },
  };

  // 合并配置
  const mergedConfig = { ...defaultConfig, ...config };

  // 响应式数据
  const chartData = ref({
    x: [],
    y: [],
  });

  // 计算属性：图表选项
  const chartOptions = computed(() => {
    const options = {
      tooltip: mergedConfig.tooltip,
      grid: mergedConfig.grid,
      xAxis: {
        ...mergedConfig.xAxis,
        data: chartData.value.x,
      },
      yAxis: mergedConfig.yAxis,
      series: [
        {
          name: mergedConfig.seriesName,
          type: 'line',
          data: chartData.value.y,
          smooth: mergedConfig.smooth,
          itemStyle: {
            color: mergedConfig.color,
          },
          lineStyle: {
            color: mergedConfig.color,
          },
        },
      ],
    };

    // 添加面积样式
    if (mergedConfig.showArea) {
      options.series[0].areaStyle = {
        color: `rgba(${hexToRgb(mergedConfig.color)}, ${mergedConfig.areaOpacity})`,
      };
    }

    // 添加图例
    if (mergedConfig.showLegend) {
      options.legend = {
        data: [mergedConfig.seriesName],
        [mergedConfig.legendPosition]: 0,
      };
    }

    return options;
  });

  /**
   * 更新图表数据
   * @param {Object} data - 图表数据
   * @param {Array} data.x - X轴数据
   * @param {Array} data.y - Y轴数据
   */
  const updateData = (data) => {
    chartData.value = {
      x: data.x || [],
      y: data.y || [],
    };
  };

  /**
   * 设置图表数据
   * @param {Array} xData - X轴数据
   * @param {Array} yData - Y轴数据
   */
  const setData = (xData, yData) => {
    chartData.value = {
      x: xData || [],
      y: yData || [],
    };
  };

  /**
   * 添加数据点
   * @param {string|number} xValue - X轴值
   * @param {number} yValue - Y轴值
   */
  const addDataPoint = (xValue, yValue) => {
    chartData.value.x.push(xValue);
    chartData.value.y.push(yValue);
  };

  /**
   * 清空数据
   */
  const clearData = () => {
    chartData.value = {
      x: [],
      y: [],
    };
  };

  /**
   * 将十六进制颜色转换为RGB
   * @param {string} hex - 十六进制颜色值
   * @returns {string} RGB颜色值
   */
  function hexToRgb(hex) {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result
      ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}`
      : '64, 158, 255';
  }

  return {
    chartOptions,
    chartData: readonly(chartData),
    updateData,
    setData,
    addDataPoint,
    clearData,
  };
}

